<template>
  <div>
    <el-card shadow="hover" class="content">
      <div class="content_header">
        <el-divider content-position="left">订单详情</el-divider>
        <div class="header_info">
          <el-input
            placeholder="请输入订单号..."
            v-model="searchCustomerOrders"
          >
          </el-input>
        </div>
        <div class="header_info">
          <el-button
            class="search_customer_btn"
            type="primary"
            @click.native="selectCustomerOrdersByOrderId"
            icon="el-icon-search"
            >搜索</el-button
          >

          <el-button
            @click="selectAllCustomerOrders"
            class="search_customer_btn"
            type="primary"
            icon="el-icon-refresh"
            >刷新</el-button
          >
        </div>
      </div>
      <div class="content_body">
        <el-table :data="orders" border style="width: 100%">
          <el-table-column prop="username" label="下单用户" width="120px">
          </el-table-column>

          <el-table-column prop="orderid" label="订单号" width="80px">
          </el-table-column>

          <el-table-column prop="productname" width="150px" label="产品名">
          </el-table-column>

          <el-table-column prop="producttype" width="100px" label="产品类型">
          </el-table-column>
          <el-table-column prop="productsize" width="100px" label="产品容量">
          </el-table-column>

          <el-table-column prop="number" width="50px" label="下单数量">
          </el-table-column>

          <el-table-column prop="price" width="80px" label="单价（含折扣）">
          </el-table-column>

          <el-table-column prop="area" label="地区"> </el-table-column>

          <el-table-column prop="addressdetail" label="详细地址">
          </el-table-column>

          <el-table-column label="审批状态" width="80">
            <template slot-scope="scope">
              <span v-show="role === '价格审批员'">
                <el-tag v-if="scope.row.pricecheck === null" type="warning"
                  >待审核</el-tag
                >
                <el-tag v-if="scope.row.pricecheck === 0" type="danger"
                  >禁止通过</el-tag
                >
                <el-tag v-if="scope.row.pricecheck === 1" type="success"
                  >审核通过</el-tag
                >
              </span>

              <span v-show="role === '风险审批员'">
                <el-tag v-if="scope.row.riskcheck === null" type="warning"
                  >待审核</el-tag
                >
                <el-tag v-if="scope.row.riskcheck === 0" type="danger"
                  >禁止通过</el-tag
                >
                <el-tag v-if="scope.row.riskcheck === 1" type="success"
                  >审核通过</el-tag
                >
              </span>

              <span v-show="role === '领导'">
                <el-tag v-if="scope.row.leadercheck === null" type="warning"
                  >待审核</el-tag
                >
                <el-tag v-if="scope.row.leadercheck === 0" type="danger"
                  >禁止通过</el-tag
                >
                <el-tag v-if="scope.row.leadercheck === 1" type="success"
                  >审核通过</el-tag
                >
              </span>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <span v-show="role === '价格审批员'">
                <el-button
                  type="success"
                  v-if="scope.row.pricecheck === null"
                  plain
                  @click="setOrderStatus(scope.row.orderid, 1)"
                  >通过</el-button
                >

                <el-button
                  v-if="scope.row.pricecheck === null"
                  type="danger"
                  plain
                  @click="setOrderStatus(scope.row.orderid, 0)"
                  >禁止通过</el-button
                >

                <el-button
                  v-if="scope.row.pricecheck !== null"
                  type="success"
                  plain
                  >已审批</el-button
                >
              </span>

              <span v-show="role === '风险审批员'">
                <el-button
                  type="success"
                  v-if="scope.row.riskcheck === null"
                  plain
                  @click="setOrderStatus(scope.row.orderid, 1)"
                  >通过</el-button
                >

                <el-button
                  v-if="scope.row.riskcheck === null"
                  type="danger"
                  plain
                  @click="setOrderStatus(scope.row.orderid, 0)"
                  >禁止通过</el-button
                >

                <el-button
                  v-if="scope.row.riskcheck !== null"
                  type="success"
                  plain
                  >已审批</el-button
                >
              </span>

              <span v-show="role === '领导'">
                <el-button
                  type="success"
                  v-if="scope.row.leadercheck === null"
                  plain
                  @click="setOrderStatus(scope.row.orderid, 1)"
                  >通过</el-button
                >

                <el-button
                  v-if="scope.row.leadercheck === null"
                  type="danger"
                  plain
                  @click="setOrderStatus(scope.row.orderid, 0)"
                  >禁止通过</el-button
                >

                <el-button
                  v-if="scope.row.leadercheck !== null"
                  type="success"
                  plain
                  >已审批</el-button
                >
              </span>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          class="pagination"
          background
          @current-change="handleCurrentChange"
          :current-page="currentPageNumber"
          :page-size="currentPageSize"
          layout="prev, pager, next"
          :total="100"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  selectAllCustomers,
  selectAllCustomerOrders,
  selectCustomerOrdersByOrderId,
} from "../../api/admin";
import baseMixin from "../../mixin/baseMixin";
export default {
  mixins: [baseMixin],
  components: {},
  data() {
    return {
      searchCustomerOrders: "",
      currentPageNumber: 1,
      currentPageSize: 3,
      customers: [],
      orders: [],
      width: "100px",
      role: "",
    };
  },
  methods: {
    async selectCustomerOrdersByOrderId() {
      if (this.searchCustomerOrders === "") {
        this.$message.error("请输入订单号");
        return;
      }
      await selectCustomerOrdersByOrderId(
        this.searchCustomerOrders,
        this.currentPageNumber,
        this.currentPageSize
      )
        .then((res) => {
          this.orders = res.data.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async selectAllCustomers() {
      await selectAllCustomers(this.currentPageNumber, this.currentPageSize)
        .then((res) => {
          this.customers = res.data.list;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    async selectAllCustomerOrders() {
      await selectAllCustomerOrders(
        this.currentPageNumber,
        this.currentPageSize
      )
        .then((res) => {
          this.orders = res.data.list;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    handleCurrentChange(value) {
      this.currentPageNumber = value;
      this.selectAllCustomerOrders();
    },
  },
  created() {
    this.role = this.getUserInfo().role;
    this.selectAllCustomerOrders();
  },
};
</script>

<style lang="scss">
@import "../../assets/css/global.scss";
@import "../../assets/css/admin_management.css";
</style>